<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import { ref, reactive, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import utils from "@/common/utils/utils.js";
const router = useRouter();
// icon

const props = defineProps({
    template_public: {
        type: Number,
        default: 0
    }
})

const emit = defineEmits(['closeModelState:closeType']);

const isBack = (type) => {
    emit('closeModelState:closeType', type);
    closeModal()
}

// base弹窗
const dialog = ref(null);
const showModal = () => {
    dialog.value.showModal();
};
const closeModal = () => {
    dialog.value.closeModal();
}

const visibleState = computed(() => {
    return dialog.value.visibleState
})

defineExpose({
    showModal,
    closeModal,
    visibleState
});
</script>

<template>
    <div>
        <baseModel ref="dialog" :contentWidth="'400px'" :maskClosable="false" :centered="false" :closable="false">
            <template #title>
                <div class="title_box">
                    <span class="title">提示</span>
                </div>
            </template>
            <template #content>
                <div class="content">
                    <img :src="utils.staticPath + 'images/workAi/shotstack/video_template_success.png'" alt="">
                    <h2>模板已在拆分中</h2>
                    <span>可以到{{ props.template_public == 1 ? '我的模板' : '模板广场' }}查看生成进度</span>
                </div>
            </template>
            <template #footer>
                <div class="bottom">
                    <a-button @click="isBack('back')" type="primary">返回{{ props.template_public == 1 ? '我的模板' : '模板广场'
                        }}</a-button>
                    <!-- <a-button @click="isBack('within')">继续等待</a-button> -->
                </div>
            </template>
        </baseModel>

    </div>
</template>



<style lang="less" scoped>
@fontColor: #1c1f23;

.title_box {
    display: flex;
    flex-direction: column;

    .title {
        font-size: 14px;
        font-weight: 600;
    }

    .tips {
        font-size: 12px;
        color: #aaaaaa;
        margin-top: 10px;
    }
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;

    h2 {
        font-size: 16px;
        color: #3D3D3D;
        font-weight: 600;
        margin: 15px 0;
    }

    span {
        color: #666666;
        font-size: 14px;
    }

    img {
        width: 100px;
        height: 100px;
    }
}



.bottom {
    display: flex;
    justify-content: center;
}
</style>